<template>
  <div class="wrap">
    <div class="approve-logs-container">
      <div class="approve-user-wrap" v-if="!!approveInfo.step">
        <span>当前审批人: {{ approveInfo.curUser }}</span>
        <span class="approve-level">共{{ approveInfo.step }}级审批</span>
      </div>
      <!-- <title-row title="审批记录"></title-row> -->
      <div class="logs-wrap">
        <div class="log-card-wrap" v-for="(log, i) in logsList" :key="i">
          <div class="approve-time">
            审核时间： <span class="time-str">{{ log.time }}</span>
          </div>
          <div class="log-label-text">
            <span class="label">审批角色：</span>
            <span class="text">{{ log.spjs }}</span>
          </div>
          <div class="log-label-text">
            <span class="label">审核人：</span>
            <span class="text">{{ log.shr }}</span>
          </div>
          <div class="log-label-text">
            <span class="label">审核结果：</span>
            <span class="text">{{ log.shjg === 1 ? "通过" : "不通过" }}</span>
          </div>
          <div class="log-label-text">
            <span class="label">原因备注：</span>
            <span class="text">{{ log.yybz }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import HeaderTop from '../components/HeaderTop'
import { getFlowrecord } from "../api";

export default {
  data() {
    return {
      approveInfo: {
        curUser: '',
        step: ''
      },
      params: {
        id: '',
        tablename: ''
      },
      logsList: []
    }
  },
  mounted() {
    this.params.id = this.$route.query.id
    this.params.tablename = this.$route.query.tablename
    const token = localStorage.getItem('zzdToken')
    getFlowrecord({
        id: this.$route.query.id,
        tablename: this.$route.query.tablename
      }, token).then(res => {
      if( res.data.dataList[0].list.length) {
        this.logsList = res.data.dataList[0].list
        this.approveInfo.curUser = res.data.dataList[0].curUser
        this.approveInfo.step = res.data.dataList[0].step
      }
      
    })
  },
  methods: {

  },
  components: {
    // HeaderTop
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../common/stylus/mixin.styl';
</style>

<style lang="scss" scoped>
.approve-logs-container {
  width: 100%;
  padding-top: 10rpx;
  background-color: rgba(247, 248, 252, 1);
  .approve-user-wrap {
    height: 55px;
    line-height: 55px;
    background-color: #fff;
    margin-bottom: 12px;
    padding: 0 12px;
    display: flex;
    justify-content: space-between;
    .approve-level {
      color: rgba(41, 130, 222, 1);
    }
  }
}
.log-card-wrap{
		background-color: #fff;
		margin-bottom: 10px;
		.approve-time{
			padding: 6px 12px;
			border-bottom: 1rpx solid rgba(224,224,224,1);
			color: rgba(41, 130, 222, 1);
			.time-str{
				font-weight: 700;
			}
		}
		.log-label-text{
			padding: 6px 12px;
			margin: 5px 0 ;
			display: flex;
			justify-content: space-between;
			.label{
				font-weight:400;
				color:rgba(158,166,177,1);
			}
			.text{}
		}
	}
</style>